/*
	kxthumb,头像/图片截取，依赖于jquery和相应版本的drag插件. 本应用中使用jquery1.4,以及jquery.ui.1.7.2版本中的drag功能
	update at:2010-2-2 
	by:海虾，修改自互联网某位大师的KXTHUMB代码
*/

/* 截取框框大小 */
var	ICON_WIDTH			=	120;  //截取框的宽
var	ICON_HEIGHT			=	120;  //截取框的高

/* 画布大小 */
var CANVAS_WIDTH		=	ICON_WIDTH	+	200;	//画布的宽 
var CANVAS_HEIGHT		=	ICON_HEIGHT	+	200;	//画布的高

/* 边距：考虑了截取框的1px的border */
var LEFT_EDGE			=	(CANVAS_WIDTH + 2 - ICON_WIDTH) / 2;	//100
var TOP_EDGE			=	(CANVAS_HEIGHT + 2 - ICON_HEIGHT) / 2;	//80

/* 其他输出参数 */
var CANVAS_LEFT_MARGIN	=	4;
var $iconElement;
var $imagedrag;
var factor;
var minFactor;
var oldWidth;
var oldHeight;
var currentWidth;
var currentHeight;
var originLeft;
var originTop;
var dragleft;
var dragtop;

//用document. ready事件中在上传后第一次转向时无法获取到图片的打开，应该是没有被下载来的缘故
$(window).load(function() {
	kxface_init();
	kxface_move();
	kxface_bar();
});

//初始化设置
function kxface_init(){

    iconElement	=	$("#ImageIcon");
    imagedrag	=	$("#ImageDrag");

    //获取上传图片的实际高度，宽度
    var image = new Image();
    image.src = $("#ImageIcon").attr('src');
    var realWidth = image.width;
    var realHeight = image.height;
    image = null;

    //计算缩放比例开始

	//图片缩小比例
    minFactor = ICON_WIDTH / Math.max(realWidth, realHeight);
    if (ICON_WIDTH > realWidth && ICON_HEIGHT > realHeight) {
        minFactor = 1;
    }
    factor = minFactor > 0.25 ? 8.0 : 4.0 / Math.sqrt(minFactor);

    //图片缩放比例
    var scaleFactor = 1;
    if (realWidth > CANVAS_WIDTH && realHeight > CANVAS_HEIGHT) {
        if (realWidth / CANVAS_WIDTH > realHeight / CANVAS_HEIGHT) {
            scaleFactor = CANVAS_HEIGHT / realHeight;
        }
        else {
            scaleFactor = CANVAS_WIDTH / realWidth;
        }
    }

    //设置滑动条的位置，设置滑动条的值的变化来改变缩放率是一个非线性的变化，而是幂函数类型 即类似y=factor（X）--此处x为幂指数
    //此处100 * (Math.log(scaleFactor * factor) / Math.log(factor)) 为知道y 求解x 的算法
    $("#kxface_bar .child").css("left", 100 * (Math.log(scaleFactor * factor) / Math.log(factor)) + "px");

    //CONVAS图片实际尺寸，并近似到整数
    currentWidth = Math.round(scaleFactor * realWidth);
    currentHeight = Math.round(scaleFactor * realHeight);

    //图片相对CANVAS的初始位置，图片相对画布居中
    originLeft = Math.round((CANVAS_WIDTH - currentWidth) / 2) ;
    originTop = Math.round((CANVAS_HEIGHT - currentHeight) / 2);

    //计算ICON中的图片的位置
    dragleft	=	originLeft - LEFT_EDGE;
    dragtop		=	originTop - TOP_EDGE;

    //设置CONVAS图片当前尺寸和位置
    iconElement.css({ width: currentWidth + "px", height: currentHeight + "px", left: originLeft + "px", top: originTop + "px" });
    imagedrag.css({ width: currentWidth + "px", height: currentHeight + "px", left: dragleft + "px", top: dragtop + "px" });

    //初始化默认值

	$("#txt_zoom").val(scaleFactor);
	$("#txt_left").val(0 - dragleft);
	$("#txt_top").val(0 - dragtop);
	$("#txt_width").val(currentWidth);
	$("#txt_height").val(currentHeight);



    oldWidth = currentWidth;
    oldHeight = currentHeight;
}

//增加拖动、联动
function kxface_move(){
    $("#ImageDrag").draggable(
    {
        cursor: 'move',
        drag: function(e, ui) {
            var self	=	$(this).data("draggable");
            var drop_img = $("#ImageIcon");
            var top = drop_img.css("top").replace(/px/, ""); //取出截取框到顶部的距离
            var left = drop_img.css("left").replace(/px/, ""); //取出截取框到左边的距离
            drop_img.css({ left: (parseInt(self.position.left) + LEFT_EDGE) + "px", top: (parseInt(self.position.top) + TOP_EDGE) + "px" }); //同时移动内部的图片
            $("#txt_left").val(0 - parseInt(self.position.left));
            $("#txt_top").val(0 - parseInt(self.position.top));
        }
    }
    );
    //设置图片可拖拽，并且拖拽一张图片时，同时移动另外一张图片
    $("#ImageIcon").draggable(
    {
        cursor: 'move',
        drag: function(e, ui) {
            var self	=	$(this).data("draggable");
            var drop_img = $("#ImageDrag");
            var top = drop_img.css("top").replace(/px/, ""); //取出截取框到顶部的距离
            var left = drop_img.css("left").replace(/px/, ""); //取出截取框到左边的距离
			drop_img.css({ left: (parseInt(self.position.left) - LEFT_EDGE) + "px", top: (parseInt(self.position.top) - TOP_EDGE) + "px" }); //同时移动内部的图片
            $("#txt_left").val(0 - (parseInt(self.position.left) - LEFT_EDGE));
            $("#txt_top").val(0 - (parseInt(self.position.top) - TOP_EDGE));
        }

    }
    );
}

//初始化slider工具条，拖动放大缩小
function kxface_bar(){
    //缩放的代码，要缩放以截取框为中心，所以要重新计算图片的left和top
	$("#kxface_bar .child").draggable({
      cursor: "move", containment: $("#kxface_bar"),
      drag: function(e, ui) {
      var left = parseInt($(this).css("left"));
          //前面讲过了y=factor（x），此处是知道x求y的值，即知道滑动条的位置，获取缩放率
          scaleFactor = Math.pow(factor, (left / 100 - 1));
          if (scaleFactor < minFactor) {
              scaleFactor = minFactor;
          }
          if (scaleFactor > factor) {
              scaleFactor = factor;
          }
          //以下代码同初始化过程，因为用到局部变量所以没有
          var iconElement	=	$("#ImageIcon");
          var imagedrag		=	$("#ImageDrag");

          var image = new Image();
          image.src = iconElement.attr("src");
          var realWidth = image.width;
          var realHeight = image.height;
          image = null;

          //图片实际尺寸
          var currentWidth = Math.round(scaleFactor * realWidth);
          var currentHeight = Math.round(scaleFactor * realHeight);

          //图片相对CANVAS的初始位置
          
          var originLeft = parseInt(iconElement.css("left"));
          var originTop = parseInt(iconElement.css("top"));

          originLeft -= Math.round((currentWidth - oldWidth) / 2);
          originTop -= Math.round((currentHeight - oldHeight) / 2);
          dragleft = originLeft - LEFT_EDGE;
          dragtop = originTop - TOP_EDGE;

          //图片当前尺寸和位置
          iconElement.css({ width: currentWidth + "px", height: currentHeight + "px", left: originLeft + "px", top: originTop + "px" });
          imagedrag.css({ width: currentWidth + "px", height: currentHeight + "px", left: dragleft + "px", top: dragtop + "px" });

          $("#txt_zoom").val(scaleFactor);
          $("#txt_left").val(0 - dragleft);
          $("#txt_top").val(0 - dragtop);
          $("#txt_width").val(currentWidth);
          $("#txt_height").val(currentHeight);

          oldWidth = currentWidth;
          oldHeight = currentHeight;

      }
    });
}

//微调slider，设置放大缩小比例
function kxface_set_slider(i) {
	var left = parseInt($("#kxface_bar .child").css("left"));
	left += i;

	if (left < 0) {
		left = 0;
	}
	if (left > 200) {
		left = 200;
	}

	scaleFactor = Math.pow(factor, (left / 100 - 1));
	if (scaleFactor < minFactor) {
		scaleFactor = minFactor;
	}
	if (scaleFactor > factor) {
		scaleFactor = factor;
	}
	var iconElement =	$("#ImageIcon");
	var imagedrag	=	$("#ImageDrag");

	var image = new Image();
	image.src = iconElement.attr("src");
	var realWidth	=	image.width;
	var realHeight	=	image.height;
	image = null;

	//图片实际尺寸
	var currentWidth = Math.round(scaleFactor * realWidth);
	var currentHeight = Math.round(scaleFactor * realHeight);

	//图片相对CANVAS的初始位置
	var originLeft = parseInt(iconElement.css("left"));
	var originTop = parseInt(iconElement.css("top"));

	originLeft -= Math.round((currentWidth - oldWidth) / 2);
	originTop -= Math.round((currentHeight - oldHeight) / 2);
	dragleft = originLeft - LEFT_EDGE;
	dragtop = originTop - TOP_EDGE;

	//图片当前尺寸和位置
	$("#kxface_bar .child").css("left", left + "px");
	iconElement.css({ width: currentWidth + "px", height: currentHeight + "px", left: originLeft + "px", top: originTop + "px" });
	imagedrag.css({ width: currentWidth + "px", height: currentHeight + "px", left: dragleft + "px", top: dragtop + "px" });

	$("#txt_zoom").val(scaleFactor);
	$("#txt_left").val(0 - dragleft);
	$("#txt_top").val(0 - dragtop);
	$("#txt_width").val(currentWidth);
	$("#txt_height").val(currentHeight);

	oldWidth = currentWidth;
	oldHeight = currentHeight;
}

//设置大图大小
function kxface_set_bigimage(imgpath) {
	$('#bigImage').val(imgpath);
	$('#ImageDrag').attr('src',imgpath+"?"+Math.random());
	$('#ImageIcon').attr('src',imgpath+"?"+Math.random());
}